import React from 'react'
import { Link } from 'react-router-dom'

class HotUI extends React.Component {
    // 在此处执行Container组件里的方法以获取数据
    componentDidMount() {
        this.props.hotRequest()
    }
    // 状态提升，用来改变父组件的初始状态
    jumpDetails(e) {
        // console.log(e.target.innerHTML);
        // console.log(this.props);
        // 用来改变父组件里的初始化值
        this.props.changeVal(e.target.innerHTML)
    }

    render() {
        // console.log(this.props.Hot);
        // 将获取到的数据进行渲染
        let arr = this.props.Hot
        let list = ''
        try {
            list = arr.map((item, index) => {
                return (
                    <li key={index}>
                        <Link to='/search/bestMatch' className='mxx_span' onClick={this.jumpDetails.bind(this)}>{item.first}</Link>
                    </li>
                )
            })
        } catch (error) {
            
        }
        
        return (
            <div>
                <ul className='mxx_list'>
                    {list}
                </ul>
            </div>
        )
    }
}

export default HotUI